<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 950px;
            height: 510px;
            background: pink;
            overflow: hidden;
        }

        li {
            /*overflow: hidden;*/   /*这里的overflow是为了在宽度不够时，不让超出标题区域的内容显示*/
            /*这个其实不是真正的内容盒子，只是显示区的盒子*/
            /*li有多宽，内部内容就能显示多宽，但是由于内容有一个大的div盒子，永远都在li内的左上角位置，所以能够实现内容区动态展开效果*/
            float: left;
            list-style: none;
            width: 100px;
            height: 400px;
            padding: 10px;
            padding-right: 0;
            background: red;
            border: 1px solid #000;
        }

        .unrealBox2 {
            margin-top: 30px;
        }

        .unrealBox3 {
            margin-top: 60px;
        }

        .unrealBox4 {
            margin-top: 90px;
        }

        li span {
            float: left;
            width: 100px;
            height: 400px;
            background: green;
            color: #fff;
            font-size: 40px;
        }

        .realBox {      /*实际的内容盒子是不用操作的，只需要给一个足够大的宽高，使内部浮动内容不会因为宽度不够而被挤到下一行*/
            width: 600px;
            height: 400px;
        }

        .realBox div {   /*这个是平时隐藏的内容盒子，其实不是隐藏，只是因为父级的父级宽度不够显示不出来，但是父级宽度一定要够大，不然浮动元素会跑到下一行*/
            float: left;
            width: 500px;
            height: 400px;
            background: yellow;
            font-size: 20px;
        }
    </style>
    <script src="../../5-练习/jquery-1.12.2.js"></script>
    <script>
        $(function () {
            //调整移入li宽度到显示整个内容，即标题宽度100+内容区div500
            //其他li的宽度缩小到只显示标题，即标题宽度100
            $("li").mouseenter(function () {
                $(this).stop().animate({
                    width: 600
                }, 200, function () {
                    $(this).find(".content").html("现在你能看到我了");
                }).siblings().stop().animate({
                    width: 100
                }, 200, function () {
                    $(this).find(".content").html("我是内容，平时你看不到我");
                });
            });
        });
    </script>
</head>
<body>
<p>
    说明：<br/>
    红色底边的是你可以看到的区域，红色到哪里，你就能看到哪里；<br/>
    绿色是标题，永远都能看到；<br/>
    黄色是实际内容，当它底部没有红色时，说明此时是隐藏的（假如父级拥有属性overflow:hidden）<br/>
</p>
<ul class="parentWrap">
    <li class="unrealBox1">
        <!--我是显示区的盒子，我会改变-->
        <div class="realBox">
            <!--我是内容的盒子，不会改变，平时你看不到我-->
            <span>我是标题，平时只能看到我</span>

            <div class="content">我是内容，平时你看不到我</div>
        </div>
    </li>
    <li class="unrealBox2">
        <!--我是显示区的盒子，我会改变-->
        <div class="realBox">
            <!--我是内容的盒子，不会改变，平时你看不到我-->
            <span>我是标题，平时只能看到我</span>

            <div class="content">我是内容，平时你看不到我</div>
        </div>
    </li>
    <li class="unrealBox3">
        <!--我是显示区的盒子，我会改变-->
        <div class="realBox">
            <!--我是内容的盒子，不会改变，平时你看不到我-->
            <span>我是标题，平时只能看到我</span>

            <div class="content">我是内容，平时你看不到我</div>
        </div>
    </li>
    <li class="unrealBox4">
        <!--我是显示区的盒子，我会改变-->
        <div class="realBox">
            <!--我是内容的盒子，不会改变，平时你看不到我-->
            <span>我是标题，平时只能看到我</span>

            <div class="content">我是内容，平时你看不到我</div>
        </div>
    </li>
</ul>

</body>
</html>
